<!DOCTYPE>
<html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/experiment.css"type="text/css">
    <link rel="stylesheet" href="css/experiment.css"type="text/css">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
        body.experiment {
            background: #fff;
        }

        /*.start {*/
            /*text-align: center;*/
            /*font-size: 2em;*/
            /*font-weight: bold;*/
            /*margin: 5em;*/
        /*}*/

        #clock {
            position: relative;
            width: 378px;
            height: 378px;
            background-image: url('http://pic002.cnblogs.com/images/2012/385052/2012031316573623.png');
            left: 50%;
            margin: 5em 0 0 -189px;
        }

        #clock div {
            position: absolute;
        }
    </style>
</head>
<body class="experiment">

<div id="wrapper">
    <header id="header">
        <aside class="tweetThis">
            <a href="http://www.cnblogs.com/wangyunbing/" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr">滴水成兵</a>
        </aside>
    </header>

    <div id="experiment">

        <div id="clock">
            <div id="hour"><img src="http://up.2cto.com/2012/0314/20120314095948127.png" alt=""></div>
            <div id="minute"><img src="http://up.2cto.com/2012/0314/20120314095948432.png" alt=""></div>
            <div id="second"><img src="http://up.2cto.com/2012/0314/20120314095948465.png" alt=""></div>
        </div>
    </div>


</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">


    $(function(){

        var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
                prop,
                el = document.createElement('div');

        for(var i = 0, l = props.length; i < l; i++) {
            if(typeof el.style[props[i]] !== "undefined") {
                prop = props[i];
                break;
            }
        }
        startClock();
        setInterval(function(){startClock();},1000)
        function startClock() {
            var angle = 360/60,
                    date = new Date(),
                    hour = (function() {
                        var h = date.getHours();
                        if(h > 12) {
                            h = h - 12;
                        }
                        return h
                    })(),
                    minute = date.getMinutes(),
                    second = date.getSeconds(),
                    hourAngle = (360/12) * hour + (360/(12*60)) * minute;

            if(prop) {
                $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
                $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
                $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
            }
        }
        document.title = date
    });
</script>

</body>
</html>